window.onload = function () {
  let res = jso;
  console.log(jso);
  function random(n, m) {
    return Math.floor(Math.random() * (m - n + 1) + n);
  }
  let bgcolor = [
    "#85a8cc",
    "#3d6a99",
    "#804045",
    "#d3802d",
    "#582d34",
    "#b25d19",
    "#454573",
    "#f0b356",
    "#478c86",
    "#7b2937",
  ];
  $(".q_center li").each(function () {
    console.log(bgcolor[random(0, bgcolor.length - 1)]);
    $(this).css({ backgroundColor: bgcolor[random(0, bgcolor.length - 1)] });
  });
  let tx = [
    "https://image.meizu.com/image/uc/b82596eeb5ed4f138f0c326ea08ea307z",
    "https://image.meizu.com/image/uc/f3b662de905f48dd8ead4cee4477b6e3z",
    "https://image.meizu.com/image/uc/f8690f5efe6e41329f9896d6e2a83dc9z",
    "https://image.meizu.com/image/uc/9fd3b506156f4eab99db2821fda5bb0bz",
  ];
  $(".mySwiper2 .swiper-slide").each(function (item) {
    $(this)[0].innerHTML = ` <div class="centter">
    <div class="tou">
      <img
        src="${tx[random(0, tx.length - 1)]}"
        alt=""
      />
    </div>
    <div class="tite">用户${random(0, 9999999)}</div>
    <div class="redu">热度:${random(0, 9999)}</div>
    <div class="guanzu">关注</div>
  </div>`;
  });
  // function funn() {
  //   let inde = random(0, bgcolor.length - 1);
  //   bg = bgcolor[inde];

  //   if (bgcolor.indexOf(bg) == -1) {
  //     funn();
  //   } else {
  //     bgcolor[inde] = "";
  //     return bg;
  //   }
  // }
  let zhuti_l = true;
  $(".zhuti").on("click", function () {
    if (zhuti_l) {
      console.log(123);
      $(".center").css({ backgroundColor: "#1d1e21" });
      $(".renqi").css({
        backgroundImage:
          "linear-gradient( to bottom right, #930f80, #000000, #3b0f12, #531407 );",
      });
      $(".buding").css({ backgroundColor: "#000" });
      $(".cont").css({ backgroundColor: "#000", color: "#fff" });
      $(".fen_c").css({ backgroundColor: "#1d1e21" });
      $(".tiezi li").css({ backgroundColor: "#1d1e21" });
      $(".gaunzhu").css({ backgroundColor: "#313131", color: "#fff" });
      $(".huati ").css({ color: "#000" });
      $(".biaoti h2").css({ color: "#fff" });
      $(".zhuti span").css({ backgroundColor: "#1a4c9b", marginLeft: "40px" });

      zhuti_l = false;
    } else {
      $(".center").css({ backgroundColor: "#ffffff" });
      $(".buding").css({ backgroundColor: "#f2f4f5" });
      $(".cont").css({ backgroundColor: "#f2f4f5", color: "#000" });
      $(".fen_c").css({ backgroundColor: "#f2f4f5" });
      $(".tiezi li").css({ backgroundColor: "#fff" });
      $(".huati").css({ color: "#000" });
      $(".biaoti h2").css({ color: "#191919" });
      $(".gaunzhu").css({ backgroundColor: "#f2f4f5", color: "#999" });
      $(".zhuti span").css({ backgroundColor: "#ff7f50", marginLeft: "5px" });

      zhuti_l = true;
    }
  });
  window.onscroll = function () {
    if (window.pageYOffset > 10) {
      if (zhuti_l) {
        $("nav").css({ backgroundColor: "#ffffffaa", color: "#000000" });
      } else {
        $("nav").css({ backgroundColor: "#000000BB", color: "" });
      }
    } else {
      $("nav").css({ backgroundColor: "#1c223d", color: "#ffffff" });
    }
  };

  $(".fen_c  div").each(function (index, item) {
    $(item).on("click", function () {
      $(this).addClass("at").siblings().removeClass("at");
    });
  });

  async function ajx() {
    setTimeout(() => {
      return res;
    }, 1000);
  }
  function str_l(str) {
    let arr2 = ["[", "]", "{", "}", ":", ",", '"'];
    let str2 = "";
    for (let i = 0; i < str.length; i++) {
      if (arr2.indexOf(str[i]) == -1) {
        str2 += str[i];
      }
    }
    return str2;
  }
  ajx().then((data) => {
    console.log(res);
    let html = ``;

    res.data.blocks.forEach((item, index) => {
      let imghtml = ``;
      try {
        item.detail.pics.forEach((item) => {
          console.log(123);
          let item_w, item_y;
          if (item.width / 10 > 400) {
            item_w = item.width / 40;
            item_y = item.height / 40;
          } else {
            item_w = item.width / 20;
            item_y = item.height / 20;
          }
          imghtml += `<img style="width: ${item_w}px;height: ${item_y}px;"src="${item.path}" alt="">`;
        });
      } catch {}
      html += ` <li>
      <div  class="yonghu">
        <div  style='background-image: url(${
          item.detail.member.avatar
        })';   class="touxiang1"></div>
        <div class="urse">
          <div class="name">
            <span>${item.detail.member.nickname}</span><span>meizu</span>
          </div>
          <div class="chenghao">${
            item.detail.member.memberIdentityName
              ? item.detail.productName
              : "魅族大家庭"
          }</div>
        </div>
        <div class="gaunzhu">关注</div>
      </div>+
      <div class="biaoti">
        <h2>${item.detail.title}</h2>
        <p>${str_l(item.detail.title)}</p>
      </div>
      <div class="tupian">
       ${imghtml}
      </div>
      <div class="huati">
       <div>中和讨论</div>
       <div>魅族20周年</div>
      </div>
      <div class="bankuaixinxi">
        5小时前 ·  来自广东 · 浏览5111
  
      </div>
      <div class="pinglun">
        <div class="use">
          <div style="" class="use_touxiang">
          </div>
          <span>${item.detail.comments[0].member.nickname}:</span>
          <span class="neirong">${item.detail.comments[0].content}</span>
        </div>
       
      </div>
      
      <div class="sanlian">
       <div>614 <span ></span></div>
       <div>405<span ></span></div>
       <div>20<span ></span></div>
      
      </div>
  
  
  
    </li>`;
      $(".tiezi")[0].innerHTML = html;
    });
  });
};
